<template>
  <div
    class="flex-container"
    v-loading="loading"
    element-loading-text="正在登录，请稍后....."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="login_panel card">
      <div class="loginTitle">
        <!-- 欢迎登录 -->
        <h2>欢迎登录</h2>
      </div>
      <div class="login_form">
        <!-- 验证表单 -->
        <el-form
          :model="loginForm"
          :rules="rules"
          status-icon
          ref="loginForm"
          label-width="100px"
          class="form_panel"
        >
          <div class="el-item">
            <el-form-item prop="username">
              <el-input
                type="text"
                v-model="loginForm.username"
                autocomplete="off"
                :placeholder="请输入用户名"
                clearable
              >
                <i slot="prefix" class="el-input__icon el-icon-s-custom"></i>
              </el-input>
            </el-form-item>
          </div>
          <div class="el-item">
            <el-form-item prop="user_pass">
              <el-input
                type="password"
                v-model="loginForm.user_pass"
                autocomplete="off"
                :placeholder="请输入密码"
                clearable
              >
                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
              </el-input>
            </el-form-item>
          </div>
          <div class="el-item">
            <div>
              <!-- 登录按钮 -->
              <el-button
                type="primary"
                class="buttonWidth"
                @click="submitForm('loginForm')"
                >登录</el-button
              >
            </div>
          </div>
          <div class="loginBottom back_link">
            <!-- 立即注册 -->
            <router-link to="/reg">立即注册</router-link> |
            <!-- 忘记密码 -->
            <router-link to="/resetPassword">忘记密码</router-link>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
// import { loginUser, getGlobalLanguageByArea,getCurrentUserIP,getDetailsUserGlobalInfo } from "@/api";

export default {
  name: "LoginView",
  data() {
    var validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "",
        user_pass: "",
        login_ip: "",
        login_lan_ip: "",
        login_country: "",
        login_location: "",
        login_city: "",
        login_regionName: "",
        login_lat: "",
        login_lon: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        user_pass: [{ validator: validatePass, trigger: "blur" }],
      },
      loading: false,
      formData: {
        in_language: "zh-CN",
      },
      loadpage: false,
    };
  },
  created() {},
  mounted() {
    //初始化局域网IP
    this.getUserIP((ip) => {
      this.loginForm.login_lan_ip = ip;
      //console.log(ip);
      //this.getLocationFromIP(ip);
      //console.log(this.login_country);
    });
    //外网IP
    this.getUserIPaddr();

    // console.log(this.loginForm);
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //登录成功操作
          this.login();
        } else {
          return false;
        }
      });
    },

    async login() {
      this.$message({
        message: "登录成功",
        type: "success",
      });
    },
  },
  gotoReg() {
    this.$router.push("/reg");
  },
};
</script>
  <style scoped>
/* 修改输入框默认自带的样式 */

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../assets/img/bg01.jpg") center center no-repeat;
  background-size: cover;
  height: 100vh;
}

.login_panel {
  width: 350px;
}

.card {
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2509803922);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: scale(1);
  transition: all 0.3s;
}

.loginTitle {
  text-align: center;
  color: #fff;
  margin: 30px 0;
}

.login_form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form_panel {
  width: 90%;
}

.el-item {
  margin: 25px 0;
}

.buttonWidth {
  width: 100% !important;
  font-family: PingFangSC-Semibold;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.loginBottom {
  margin-bottom: 30px;
  text-align: center;
  color: #ffffff;
}

.back_link a {
  font-size: 12px;
  color: #ffffff;
  text-decoration: none;
}
</style>
<style>
.el-form-item > div {
  margin-left: 0px !important;
}
</style>